@charset "utf-8";
html{font-size: 50px;-webkit-text-size-adjust:none;height: 100%;}
body{min-height: 100%;font-family:"苹方","San Francisco","黑体","Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: .28rem;color:#000;background: #f5f5f5;}
html,body,header,footer,a,select,section,div,p,span,img,input,textarea,li,ul,dl,dt,dd,table,th,tr,td,h1,h2,h3,h4,h5,h6{margin:0;padding:0;-webkit-tap-highlight-color:rgba(255,0,0,0);border:none;outline:none;-webkit-touch-callout: none}
.clearfix {*zoom: 1;}
.clearfix:before,
.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
a{text-decoration: none;color: #000;}
img{max-width:100%;}
li{list-style: none;}
.fl{float:left;}
.fr{float:right;}
.radius5{border-radius: .1rem;}
.radius10{border-radius: .2rem;}
.hide{display: none;}
.show{display: block;}
.show-in{display: inline-block;}

/*head tip style*/
.header-tip{position:relative;display:block;font-size: .26rem;text-align: center;padding:.2rem .3rem;line-height: .36rem;background: #349bff;color:#fff;}
.header-tip .icon-point-right-white{position:absolute;right:.3rem;top:50%;margin-top:-7px;}
/*head tip end*/

.common-sec-title{font-size: .26rem;font-weight:bold;color:#a0a0a0;line-height: .34rem;margin:.28rem 0 .12rem;padding:0 .3rem;}
[v-cloak]{
    display:none
}
.test-webp{
    opacity: 0;
    position: absolute;
    bottom: 0;
}
body {
    font-size: 20px;
    background: #1F0D33;
    font-family: "PingFang SC";
}
body::-webkit-scrollbar{
    display: none;
}
.stop-event{
    pointer-events: none;
}
.top-part{
    width: 91.5%;
    height: 1.29rem;
    position: fixed;
    top:0;
    z-index: 10;
    left: 4.25%;
}
.top-part .left-icon{
    position: absolute;
    display: block;
    width: 2rem;
    height: .6rem;
    top:.33rem;
    left:0;
}
.top-part .right-icon{
    position: absolute;
    display: block;
    width: .36rem;
    height: .48rem;
    top:.33rem;
    right:0;
}
.top-part .close-icon{
    width: .54rem;
    height: .72rem;
    display: block;
    position: absolute;
    right: -.09rem;
    top:.21rem;
}
.top-part .thin-line{
    width: 100%;
    height: .01rem;
    background-color:rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
    left: 0;
}
.swiper-slide{
    overflow: hidden;
//height: 100% !important;
}
.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    display: block;
    object-fit: cover;
}
.can_not_webp{
    background: rgba(0,0,0,0) !important;
}

.swiper-slide:nth-child(1) .page1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.swiper-slide:nth-child(1) .main-text{
    width: 4.8rem;
    height: 2.42rem;
    position: absolute;
    margin-left: -2.4rem;
    left: 50%;
    top:32%;
}
.swiper-slide:nth-child(1) .download-btn{
    bottom: 2.44rem;
}
.swiper-slide:nth-child(1) .text-group{
    height: .4rem;
    width: 2.7rem;
    position: absolute;
    margin-left: -1.35rem;
    left: 50%;
    bottom: 1.64rem;
    color: #fff;
    font-size: .28rem;
    line-height: .32rem;
    padding-top: .04rem;
}
.swiper-slide:nth-child(1) .text-group .left-text{
    float: left;
}
.swiper-slide:nth-child(1) .text-group .mid-line{
    height: .24rem;
    width: .01rem;
    transform: scaleX(0.5);
    position: absolute;
    top:.08rem;
    background: rgba(255,255,255,0.4);
    left: 50%;
}
.swiper-slide:nth-child(1) .text-group .right-text{
    float: right;
}
.swiper-slide:nth-child(2){
    background: #FF3B81;
}
.swiper-slide:nth-child(2) .layer3{
    width: 100%;
    display: block;
    position: absolute;
    top:5rem;
    transition: top .5s;
    z-index: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.swiper-slide:nth-child(2) .active3{
    top:2.5rem;
}
.swiper-slide:nth-child(2) .layer2{
    width: 100%;
    display: block;
    position: absolute;
    top:6rem;
    transition: top .8s;
    z-index: 2;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.swiper-slide:nth-child(2) .active2{
    top:2rem;
}
.swiper-slide:nth-child(2) .layer1{
    width: 100%;
    display: block;
    position: absolute;
    top:7rem;
    transition: top 1.2s;
    z-index: 3;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.swiper-slide:nth-child(2) .active1{
    top:.8rem;
}
.swiper-slide:nth-child(2) .shade{
    height: 56%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(255,59,125,0),rgba(255,59,125,0.7), rgba(255,59,125,0.7))
}
.swiper-slide:nth-child(2) .main-text{
    font-size: .85rem;
    font-weight: 500;
    color: #fff;
    width: 100%;
    text-align: center;
    bottom: 4.6rem;
    position: absolute;
    z-index: 5;
}
.swiper-slide:nth-child(2) .desc-text{
    font-size: .34rem;
    line-height: .5rem;
    color: #fff;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 3.38rem;

}
.swiper-slide:nth-child(2) .download-btn{
    bottom: 1.2rem;
}
.swiper-slide:nth-child(3){
    background: #792CF0;
    perspective-origin: center center;
    perspective: 400px;
}
.swiper-slide:nth-child(3) .main-text{
    font-size: .85rem;
    line-height: 1.04rem;
    font-weight: 500;
    color: #fff;
    width: 100%;
    text-align: center;
    top:2rem;
    position: absolute;
    z-index: 2;
}
.swiper-slide:nth-child(3) .desc-text{
    font-size: .34rem;
    line-height: .5rem;
    color: #fff;
    width: 100%;
    text-align: center;
    position: absolute;
    top:3.4rem;
    z-index: 2;
}
.swiper-slide:nth-child(3) .bottom-bg{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.swiper-slide:nth-child(3) .shadow{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 7.7rem;
    background-image: linear-gradient(to bottom, rgba(123, 44, 243, .3),rgba(123, 44, 243, 0));
}
.swiper-slide:nth-child(3) .download-btn{
    top: 5.2rem;
    z-index: 2;
}
.bubble1{
//width: 2.64rem;
    height: .9rem;
    bottom: 5rem;
    left: .4rem;
    position: absolute;
    z-index: 2;
}
.bubble2{
//width: 3.48rem;
    height: .9rem;
    position: absolute;
    bottom: 3rem;
    left: 1.2rem;
    z-index: 2;
}
.bubble3{
//width: 1.88rem;
    height: .9rem;
    position: absolute;
    bottom: 2rem;
    right: 1.2rem;
    z-index: 2;
}
.bubble4{
//width: 2.84rem;
    height:.9rem;
    position: absolute;
    bottom: 4rem;
    right:.1rem;
    z-index: 2;

}
.emoji1{
    width: .6rem;
    height: .6rem;
    position: absolute;
    z-index: 1;
    bottom: 5.2rem;
    left: 2.8rem;
}
.emoji2{
    width: .6rem;
    height: .6rem;
    position: absolute;
    z-index: 1;
    bottom: 2.2rem;
    right: 1rem;
}
.emoji3{
    width: .6rem;
    height: .6rem;
    position: absolute;
    z-index: 1;
    bottom: 2rem;
    left: 2rem;
}
.anim .animb1{
    -webkit-animation:b1 12s infinite linear;
    animation:b1 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes b1 {
    0%{
        bottom: 5rem;
        opacity: 0;
        transform: scale(.5) translateZ(0);
    }
    10%{
        opacity: .7;
        transform: scale(1) rotateZ(-6deg) rotateY(0deg);
    }
    30%{
        opacity: .7;
        transform: scale(1.04) rotateZ(-9deg) rotateY(20deg);
    }
    50%{
        opacity: .7;
        transform: scale(1.04) rotateZ(-13deg) rotateY(40deg);
    }
    60%{
        bottom:6rem;
        opacity: 0;
        transform:scale(1.1) rotateZ(-15deg) rotateY(50deg);
    }
    61%{
        bottom:5rem;
        opacity: 0;
    }
    100%{
        bottom:5rem;
        opacity: 0;
    }

}
.anim .animb2{
    -webkit-animation:b2 12s infinite linear;
    animation:b2 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes b2 {
    0%{
        opacity: 0;
        transform: scale(.3);
        bottom:3rem;
        left:1.2rem;
    }
    16%{
        opacity: 0;
        transform: scale(.3) rotateZ(0deg)  rotateY(0deg);
    }
    20%{
        opacity: .8;
        left: 1.4rem;
        transform: scale(1) rotateZ(-4deg) rotateY(10deg);
    }
    50%{
        opacity: .8;
        transform: scale(1.04) rotateZ(-10deg) rotateY(40deg);
        left:1.1rem;
    }
    62%{
        opacity: .8;
        transform: rotateZ(-14deg) rotateY(55deg);
    }
    65%{
        bottom: 4.2rem;
        opacity: 0;
        transform:scale(1.1) rotateZ(-15deg) rotateY(60deg);
        left:1.2rem;
    }
    70%{
        bottom: 3rem;
        opacity: 0;
    }
    100%{
        bottom: 3rem;
        opacity: 0;
    }

}
.anim .animb3{
    -webkit-animation:b3 12s infinite linear;
    animation:b3 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes b3 {
    0%{
        opacity: 0;
        bottom: 2rem;
        transform: scale(.4);

    }
    36%{
        opacity: 0;
        transform: scale(.4);
    }
    40%{
        opacity: .8;
        transform: scale(1) rotateZ(2deg) rotateY(0deg);
    }
    70%{
        opacity: .8;
        transform: scale(1.04) rotateZ(0deg) rotateY(-40deg);
    }
    90%{
        opacity: 0;
        bottom: 3.6rem;
        transform:scale(1.1) rotateZ(6deg) rotateY(-60deg);
    }
    100%{
        bottom: 2rem;
        opacity: 0;
    }

}
.anim .animb4{
    -webkit-animation:b4 12s infinite linear;
    animation:b4 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes b4 {
    0%{
        opacity: .8;
        transform:scale(1) rotateZ(5deg) rotateY(-40deg);
        bottom: 3rem;
    }
    20%{
        opacity: 0;
        transform: scale(1) rotateZ(10deg) rotateY(-60deg);
        bottom: 3.6rem;
    }
    72%{
        opacity: 0;
        transform: scale(.6) rotateY(0deg);
        bottom: 2rem;
    }
    80%{
        opacity: .8;
        transform: scale(1) rotateZ(2deg) rotateY(-10deg) rotateY(-10deg);
    }
    90%{
        opacity: .8;
        transform: scale(1) rotateZ(0deg) rotateY(-20deg);
    }
    100%{
        opacity: .8;
        transform:scale(1) rotateZ(5deg) rotateY(-40deg);
        bottom: 3rem;
    }

}
.anim .anime1{
    -webkit-animation:e1 12s infinite linear;
    animation:e1 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes e1 {
    0%{
        opacity: 0;
        bottom: 2.8rem;
    }
    20%{
        opacity: 0;
        bottom: 2.8rem;
    }
    40%{
        opacity: .8;
    }
    60%{
        opacity: .8;
    }
    65%{
        opacity: 0;
        bottom: 4rem;
    }
    100%{
        opacity: 0;
        bottom: 2.8rem;
    }


}
.anim .anime2{
    -webkit-animation:e2 12s infinite linear;
    animation:e2 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes e2 {
    0%{
        opacity: 0;
        bottom: 1.8rem;
    }
    40%{
        opacity: 0;
        bottom: 1.8rem;
    }
    50%{
        opacity: .8;
    }
    70%{
        opacity: .8;
    }
    80%{
        opacity: 0;
        bottom: 4.2rem;
    }
    100%{
        opacity: 0;
    }

}
.anim .anime3{
    -webkit-animation:e3 12s infinite linear;
    animation:e3 12s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes e3 {
    0%{
        opacity: 0;
        bottom: 1.8rem;
    }
    50%{

    }
    65%{
        opacity: 0;
        bottom: 1.8rem;
    }
    80%{
        opacity: .8;
    }
    90%{
        opacity: 0;
        bottom: 2.4rem;
    }
    100%{
        opacity: 0;
    }

}
.swiper-slide:nth-child(4) .page4{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.swiper-slide:nth-child(4) .main-img{
    position: absolute;
    margin-left: -1.125rem;
    left:50%;
    width: 2.25rem;
    height: 3.01rem;
    display: block;
    top:2.8rem;
}
.swiper-slide:nth-child(4) .download-btn{
    bottom: 2.22rem;
}
.next{
    width: .54rem;
    height: .22rem;
    margin-left: -.27rem;
    left: 50%;
    position: absolute;
    bottom: .8rem;
    -webkit-animation:gonext 1.8s infinite linear;
    animation:gonext 1.8s infinite linear;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
@keyframes gonext {
    0%{
        bottom: .8rem;
        opacity:1;

    }
    60%{
        bottom: .3rem;
        opacity:0;
    }
    100%{
        bottom: .8rem;
        opacity:0;
    }
}
.hide-cover{
//transform: scale(2,0) !important;
//transform-origin: center 0;
    height: 0 !important;
}
.hide-text p{
    opacity: 0 !important;
    font-size: 0;
}
.show-cover{
    opacity: 1 !important;
    height: 100%;
}
.black-cover{
    opacity: 0;
    transform: scale(1,1) translateZ(0);
    transform-origin: center 0;
    transition:height .3s linear 0s;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    left:0;
    top:0;
    background: rgba(0,0,0,0.8);
    pointer-events: none;
}
.black-cover .main-group{
    width: 100%;
    text-align: center;
    font-size: .4rem;
    color: #fff;
    position: absolute;
    top:3.6rem;
    line-height: .44rem;
    font-weight: 400;
}
.black-cover .main-group p{
    margin-bottom: 1.2rem;
    opacity: 1;
    pointer-events: all;
}
.black-cover .main-group p:nth-child(1){
    transition:opacity .25s linear .1s;
}
.black-cover .main-group p:nth-child(2){
    transition:opacity .25s linear .2s;
}
.black-cover .main-group p:nth-child(3){
    transition:opacity .25s linear .4s;
}
.black-cover .hide-bottom-group{
    font-size: 0;
    opacity:0 !important;
}
.black-cover .bottom-group{
    font-size: .24rem;
    color: #505050;
    line-height: .28rem;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 1.4rem;
    opacity: 1;
    transition:opacity .1s linear .5s;
    pointer-events: all;
}
.black-cover .hide-copy-right{
    font-size: 0;
    opacity: 0 !important;
}
.black-cover .copyright{
    font-size: .18rem;
    color: #888888;
    width: 100%;
    position: absolute;
    text-align: center;
    line-height: .22rem;
    bottom: .5rem;
    opacity: 1;
    transition:opacity .1s linear .7s;
}
.download-btn{
    width:2.9rem;
    height:.9rem;
    background:#fff;
    font-size:.32rem;
    color:#232222;
    line-height:.36rem;
    box-sizing:border-box;
    padding-top:.27rem;
    text-align:center;
    border-radius:.45rem;
    position:absolute;
    margin-left:-1.45rem;
    left:50%;
}